<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加流程实例</title>
    <link rel="stylesheet" href="../../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../../admin/css/reset.css"/>
</head>
<body>

<form class="layui-form" action="" lay-filter="create-data-form">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label required">审批流程</label>
                <div class="layui-input-inline">
                    <select name="process_id" id="process-id" lay-filter="process"></select>
                </div>
            </div>
            <!--  表单容器-->
            <div id="container" style="height: auto;"></div>
        </div>
    </div>
    </div>

    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
                确定
            </button>
            <button type="button" class="pear-btn pear-btn-md" lay-on="close">
                取消
            </button>
        </div>
    </div>
</form>
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../lms/base64.js"></script>
<script src="../../../lms/common.js"></script>
<script src="../../../lms/permission.js"></script>
<script src="../../../lms/config.js"></script>
<script>


    const PRIMARY_KEY = "id";
    const PROCESS_RESTFUL_API = lms_config.api_url + "/adminapi/wf/process";
    const RESTFUL_API = lms_config.api_url + "/adminapi/wf/order";

    // 字段设置
    layui.use(["common", "popup", "form", "jquery", "laytpl", "util"], function () {
        let popup = layui.popup;
        let form = layui.form;
        let util = layui.util;
        let laytpl = layui.laytpl;
        let method = 'POST';
        let $ = layui.jquery;
        let htmlFilePath = '../../../view/wf/template/'


        if (getQueryString('operation') == 'add') {
            getProcess()
        }

        /**
         * 流程选择事件
         */
        form.on('select(process)', function (data) {
            let selectedOption = data.elem.options[data.elem.selectedIndex];
            let customAttrValue = selectedOption.getAttribute('instance_url');
            if (customAttrValue === '') {
                $('#container').html('')
                return false
            }
            formRendering(htmlFilePath + customAttrValue)
        });


        /**
         * 表单提交
         */
        form.on('submit(save)', function (data) {
            let processId = data.field.process_id ?? '';
            let args = data.field;
            if (processId === '') {
                return false;
            }
            delete args.process_id
            layui.$.ajax({
                url: RESTFUL_API,
                type: method,
                dateType: "json",
                contentType: 'application/json',
                data: JSON.stringify({process_id: processId, args: data.field}),
                success: function (ret) {
                    if (ret.status == 200) {
                        popup.success(ret.msg, function () {
                            parent.refreshTable();
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    } else {
                        popup.failure(ret.msg);
                    }
                }
            });
            return false
        })


        /**
         * 获取流程
         */
        function getProcess() {
            $.ajax({
                url: PROCESS_RESTFUL_API,
                dataType: 'json',
                data: {page: 1, limit: 9999, state: 1},
                success: function (ret) {
                    let html = '<option value="" instance_url="">请选择</option>';
                    let data = ret.data['list'] ?? [];
                    $.each(data, function (index, item) {
                        html += '<option instance_url=' + item.instance_url + ' value=' + item.id + '>' + item.display_name + item.version + '</option>'
                    });
                    $('#process-id').html(html);
                    form.render()
                }
            });
        }

        /**
         * 表单渲染
         * @param htmlFilePath
         * @returns {boolean}
         */
        function formRendering(htmlFilePath) {
            $.ajax({
                url: htmlFilePath + '.html', // test.html文件的路径
                type: 'GET',
                dataType: 'html',
                success: function (response) {
                    //将HTML代码插入到页面中
                    $('#container').html(response);
                }
            });
        }

        /**
         * 关闭当前页面
         */
        util.on('lay-on', {
            close: function () {
                parent.refreshTable();
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            }
        });
    });

</script>

</body>
</html>
